<template>
<div class="wrapper">
    <div class="container commw" style="margin-bottom:20px">
        <div class="texycontainer">
            <p> {{$t('publisherapply.titles[0]')}}</p>
            <p>{{$t('publisherapply.titles[1]')}}</p>
            <p class="dot"> {{$t('publisherapply.titles[2]')}}</p>
            <p class="dot"> {{$t('publisherapply.titles[3]')}}</p>
            <p class="dot"> {{$t('publisherapply.titles[4]')}}</p>
            <p class="dot"> {{$t('publisherapply.titles[5]')}}</p>
            <p> {{$t('publisherapply.titles[6]')}}</p>
        </div>
    </div>
    <div class="container commw">
        <div class="stepswaper">
            <a-steps :current="current">
                <a-step v-for="(item,index) in steps" :key="item.title" :title="$t('publisherapply.nav['+index+']')" />
                <!-- <a-icon slot="icon" type="smile-o" /> -->
            </a-steps>
            <div class="steps-content">
                <div v-show="current==0" class="componentsteps">
                    <a-form-model id="components-form1" :form="form1" ref="form1" :model="form1" :label-col="{ span: 7 }" :wrapper-col="{ span: 17 }" :rules="rules">
                        <a-form-model-item required prop="email" :label="$t('index.from')[1]">
                            <a-input v-model="form1.email" :placeholder="$t('index.placeholder')[3]">
                                <a-icon slot="prefix" type="mail" style="color: rgba(0,0,0,.25)" />
                                <a-button slot="addonAfter" type="primary" class="verifyButton" @click="usercuurunfo">
                                    {{$t('publisherapply.form1')[0]}}
                                </a-button>
                            </a-input>
                        </a-form-model-item>
                        <!-- <a-form-model-item required prop="verifycode" :label="$t('index.from')[4]">
                            <a-input v-model="form1.verifycode" :placeholder="$t('index.placeholder')[0]">
                                <a-icon slot="prefix" style="color: rgba(0,0,0,.25)" />
                                <a-button slot="addonAfter" type="primary" class="verifyButton" :loading='verifycodeLoding' @click="handleGetMailCode">
                                    {{$t('index.from2')[5]}}{{verifycodeLoding?count:''}}
                                </a-button>
                            </a-input>
                        </a-form-model-item> -->
                        <a-form-model-item required prop="webName" :label="$t('publisherapply.subTitle')[1]" style="margin-bottom:18px">
                            <a-input v-model="form1.webName" :placeholder="$t('index.placeholder')[0] + $t('publisherapply.subTitle')[1]">

                            </a-input>
                        </a-form-model-item>
                        <div class="continfo" style="padding-left:60px;padding-bottom:8px">
                            <p style="margin-bottom:8px"><span class="time2">{{$t('publisherapply.form1')[1]}}</span></p>
                            <p><span class="time">{{$t('publisherapply.form1')[2]}}</span></p>
                        </div>
                    </a-form-model>
                </div>
                <div v-show="current==1" class="componentsteps">
                    <a-form-model id="components-form2" :form="form2" :label-col="{ span: 10 }" :wrapper-col="{ span: 8 }" ref="form2" :model="form2" :rules="rules">
                        <a-form-model-item required prop="areaId" :label="$t('index.from[7]')">
                            <a-select show-search v-model="form2.areaId" :placeholder="$t('index.from[7]')" @change="changeAreaId">
                                <a-select-option v-for="(item,index) in provinceList" :key="index" :value="item.id">
                                    <!-- {{item.enName}} -->
                                    {{item.name}}
                                </a-select-option>
                            </a-select>
                        </a-form-model-item>

                    </a-form-model>
                </div>
                <div v-show="current==2" class="componentsteps">
                    <a-form-model id="components-form3" :form="form3" :label-col="{ span: 6 }" :wrapper-col="{ span: 8 }" ref="form3" :model="form3" :rules="rules">
                        <a-form-model-item required prop="pressType" :label="$t('publisherapply.form3[0]')" :wrapper-col="{ span: 12 }">
                            <div style="text-align:left"><span :class="{tag:true,tagactive:form3.pressType==tag.value}" @click="form3.pressType=tag.value" v-for="(tag,index) in type1" :key="index"> {{tag.lable}}</span> </div>
                        </a-form-model-item>
                        <a-form-model-item  required prop="corpName" :label="$t('publisherapply.form3[1]')" style="margin-bottom:18px">
                            <a-input v-model="form3.corpName" :placeholder="$t('publisherapply.placeholder[0]')+$t('publisherapply.form3[1]')">
                            </a-input>
                        </a-form-model-item>
                        <a-form-model-item  required prop="corpCode" :label="$t('publisherapply.form3[2]')" style="margin-bottom:18px">
                            <a-input v-model="form3.corpCode" :placeholder="$t('publisherapply.placeholder[0]')+$t('publisherapply.form3[2]')">
                            </a-input>
                        </a-form-model-item>
                        <a-form-model-item prop="license" :label="$t('publisherapply.form3[3]')" style="margin-bottom:18px">
                            <upload @removefile='removefile1' @handlesuccessfile='handlesuccessfile1' :file='form3.license' type='license' />
                        </a-form-model-item>
                        <a-row>
                            <a-col :span="14">
                                <a-form-model-item required prop="pressName" :label="$t('publisherapply.form3[4]')" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }" style="margin-bottom:18px">
                                    <a-input v-model="form3.pressName" :placeholder="$t('publisherapply.placeholder[0]')+$t('publisherapply.form3[4]')">
                                    </a-input>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="10">
                                <a-form-model-item required prop="pressEnName" :label="$t('publisherapply.form3[5]')" style="margin-bottom:18px" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                                    <a-input v-model="form3.pressEnName" :placeholder="$t('publisherapply.placeholder[0]')+$t('publisherapply.form3[5]')">
                                    </a-input>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-form-model-item prop="logo" :label="$t('publisherapply.form3[6]')" style="margin-bottom:18px">
                            <upload @removefile='removefile1' @handlesuccessfile='handlesuccessfile1' :file='form3.logo' info='请上传180px*50px,且小于2M的图片' type='logo'/>
                        </a-form-model-item>
                        <a-row>
                            <a-col :span="14">
                                <a-form-model-item  required prop="coPublicInfo" :label="$t('publisherapply.form3[7]')" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }" style="margin-bottom:18px">
                                    <a-input v-model="form3.coPublicInfo" :placeholder="$t('publisherapply.placeholder[0]')+$t('publisherapply.form3[7]')">
                                    </a-input>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="10">
                                <a-form-model-item required  prop="subject" :label="$t('publisherapply.form3[8]')" style="margin-bottom:18px" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                                    <a-input v-model="form3.subject" :placeholder="$t('publisherapply.placeholder[0]')+$t('publisherapply.form3[8]')">
                                    </a-input>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="14">
                                <a-form-model-item  prop="managerName" :label="$t('publisherapply.form3[9]')" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }" style="margin-bottom:18px">
                                    <a-input v-model="form3.managerName" :placeholder="$t('publisherapply.placeholder[0]')+$t('publisherapply.form3[9]')">
                                    </a-input>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="10">
                                <a-form-model-item required prop="phone"  :label="$t('publisherapply.form3[10]')" style="margin-bottom:18px" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                                    <a-input v-model.number="form3.phone" :placeholder="$t('publisherapply.placeholder[0]')+$t('publisherapply.form3[10]')">
                                    </a-input>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="14">
                                <a-form-model-item  prop="country" :label="$t('publisherapply.form3[11]')" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }" style="margin-bottom:18px">
                                    <a-select show-search v-model="form3.country" :placeholder="$t('publisherapply.placeholder[0]')+$t('publisherapply.form3[11]')">
                                        <a-select-option v-for="(item,index) in countrys" :key="index" :value="item.code">
                                            <!-- {{item.enName}} -->
                                            {{item.name}}
                                        </a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="10">
                                <a-form-model-item  prop="address" :label="$t('publisherapply.form3[12]')" style="margin-bottom:18px" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                                    <a-input v-model="form3.address" :placeholder="$t('publisherapply.placeholder[0]')+$t('publisherapply.form3[12]')">
                                    </a-input>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="14">
                                <a-form-model-item required prop="identity" :label="$t('publisherapply.form3[13]')" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }" style="margin-bottom:18px">
                                    <a-input v-model="form3.identity" :placeholder="$t('publisherapply.placeholder[0]')+$t('publisherapply.form3[13]')">
                                    </a-input>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="10">
                                <a-form-model-item required prop="identityType" :label="$t('publisherapply.form3[14]')" style="margin-bottom:18px" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                                    <a-select show-search v-model="form3.identityType" :placeholder="$t('publisherapply.placeholder[0]')+$t('publisherapply.form3[14]')">
                                        <a-select-option v-for="(item,index) in type2" :key="index" :value="item.value">
                                            <!-- {{item.enName}} -->
                                            {{item.lable}}
                                        </a-select-option>
                                    </a-select>

                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-form-model-item prop="file" :label="$t('publisherapply.form3[15]')" style="margin-bottom:18px">
                            <a-row>
                                <a-col :span="12">
                                    <upload @removefile='removefile1' @handlesuccessfile='handlesuccessfile1' :file='form3.proves1' info='请上传身份证正面' type='proves1' />
                                </a-col>
                                <a-col :span="12">
                                    <upload @removefile='removefile1' @handlesuccessfile='handlesuccessfile1' :file='form3.proves2' info='请上传身份证反面' type='proves2'/>
                                </a-col>
                            </a-row>

                        </a-form-model-item>
                    </a-form-model>
                </div>
            </div>
            <div class="steps-action">
                <a-button v-if="current < steps.length - 1" type="primary" @click="next">
                    {{$t('publisherapply.subsumit[0]')}}
                </a-button>
                <a-button v-if="current == steps.length - 1" type="primary" @click="handleSuBmit">
                    {{$t('publisherapply.subsumit[2]')}}
                </a-button>
                <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
                    {{$t('publisherapply.subsumit[1]')}}
                </a-button>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import {
    submitRegisterApi,
    sendEmailCodeRegApi,
    getProvincePageApi,
} from "~/assets/js/api";
var baseUrl = process.env.baseUrl
import countrys from '~/assets/js/country.js'

import upload from '~/components/upload'
export default {
    comments: {
        upload
    },
    data() {
        return {
            current: 0,
            countrys: countrys,
            verifycodeLoding: false,
            imgloading: false,
            previewVisible: false,
            fileList: [],
            previewImage: '',
            intervalins: null,
            baseUrl: baseUrl,
            count: 60,
            rules: {
              phone: [{ validator: '', pattern: /^\d{11}$/, trigger: 'change',message: 'Please input a valid phone number!', }],
            },
            type1: [{
                lable: '个人',
                value: '3'
            }, {
                lable: '政府',
                value: '0'
            }, {
                lable: '媒体',
                value: '1'
            }, {
                lable: '企业',
                value: '2'
            }, {
                lable: '其他组织',
                value: '4'
            }],
            type2: [{
                lable: '身份证',
                value: 0
            }, {
                lable: '护照',
                value: 1
            }, {
                lable: '驾照',
                value: 2
            }],
            steps: [{
                    title: '基本信息',
                    content: 'First-content',
                },
                {
                    title: '选择类型',
                    content: 'Second-content',
                },
                {
                    title: '信息登记',
                    content: 'Last-content',
                },
            ],
            provinceList:[],
            areaCode:'',
            form: {},
            form1: {
                email: '',
                password: '',
                verifycode: '',
                webName: ""
            },
            form2: {
                areaId: ''
            },
            form3: {
                "address": "",
                "coPublicInfo": "",
                "corpCode": "",
                "corpName": "",
                "country": "",
                "domainName": "",
                "identity": "",
                "identityType": 0,
                "license": "",
                "logo": "",
                "managerId": 0,
                "managerName": "",
                "phone": "",
                "pressEnName": "",
                "pressName": "",
                "pressType": 3,
                "proves": [],
                "proves1":'',
                "proves2":'',
                "subject": "",

            }
            //form3:{"email":"289759815@qq.com","password":"xxx","verifycode":"xxx","areaId":100000,"address":"天府三街","areaCode":"","coPublicInfo":"新华社出对公","corpCode":"XHB1215151","corpName":"新华社出版商","country":"us","domainName":"","identity":"515515156151515151","identityType":0,"license":"https://d1debd0a-qikan.oss-cn-chengdu.aliyuncs.com/static/qikan_ch_1715674256830_199774.jpg","logo":"https://d1debd0a-qikan.oss-cn-chengdu.aliyuncs.com/static/qikan_ch_1715674966617_124654.png","managerId":0,"managerName":"张三","phone":15800828884,"pressEnName":"XINHUALOGO","pressName":"新华社出版商","pressType":3,"proves":["https://d1debd0a-qikan.oss-cn-chengdu.aliyuncs.com/static/qikan_ch_1715674303574_177436.jpg","https://d1debd0a-qikan.oss-cn-chengdu.aliyuncs.com/static/qikan_ch_1715739354177_631272.jpg"],"proves1":"https://d1debd0a-qikan.oss-cn-chengdu.aliyuncs.com/static/qikan_ch_1715674303574_177436.jpg","proves2":"https://d1debd0a-qikan.oss-cn-chengdu.aliyuncs.com/static/qikan_ch_1715739354177_631272.jpg","subject":"新华社出对公","webName":""}
        };
    },
    mounted(){
      this.getProvincePage()
      console.log(this.$i18n.locale,'this.$i18n.locale')
      if(this.$i18n.locale==''){

      }
    },
    methods: {
      changeAreaId(id){
        this.provinceList.map((item)=>{
          if(item.id==id){
            this.areaCode=item.postalCode
          }
        })
        console.log(this.areaCode,'this.areaCode')
      },
        next() {
          if (!this.$store.getters.getterUserInfo.email) {
                this.$confirm({
                    title: '您还没有登录，是否立即前往登录?',
                    //content: h => <div style="color:red;">Some descriptions</div>,
                    onOk: () => {
                        this.$router.push({
                            path: "/login"
                        })
                    },
                    onCancel() {
                        console.log('Cancel');
                    },
                    class: 'test',
                });
                return
          }
            if (this.current == 0) {
                this.$refs.form1.validate(valid => {
                    if (valid) {
                        this.current++;
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
            if (this.current == 1) {
                this.$refs.form2.validate(valid => {
                    if (valid) {
                        this.current++;
                    } else {
                        return false;
                    }
                });
            }
        },
        prev() {
            this.current--;
        },
        handleSuBmit() {
            this.$refs.form3.validate(valid => {
                if (valid) {
                    this.handleform()
                } else {
                    return false;
                }
            });
        },
        handleform() {
            //特殊文件校验逻辑
            if (!this.form3.license) {
                this.$message.warn(this.$t('publisherapply.placeholder[7]')); //营业执照
                return
            }
            if (!this.form1.email) {
                this.$message.warn(this.$t('index.placeholder[3]')); //营业执照
                return
            }
            //$t('publisherapply.placeholder[0]')+$t('publisherapply.form3[5]')
            if (!this.form3.logo) {
                this.$message.warn(this.$t('publisherapply.placeholder[0]')+this.$t('publisherapply.form3[6]')); //营业执照
                return
            }
            
            submitRegisterApi({
                  ...this.form1,
                  ...this.form2,
                  ...this.form3,
                  proves:[this.form3.proves1,this.form3.proves2],
                  areaCode:this.areaCode
            }).then((data) => {
                this.$message.info(data.message || '新增出版商成功!');
                setTimeout(()=>{
                  this.$router.push({
                    path: '/success'
                  })
                },1500)

            }).catch((err) => {
                console.log(err, 'err')
                err.msg ? this.$message.error(err.msg) : '';
                //this.verifycodeLoding = false;
            })
        },
        usercuurunfo() {
            console.log(this.$store.getters.getterUserInfo, 'this.$store.getters.')
            if (!this.$store.getters.getterUserInfo.email) {
                this.$confirm({
                    title: '您还没有登录，是否立即前往登录?',
                    //content: h => <div style="color:red;">Some descriptions</div>,
                    onOk: () => {
                        this.$router.push({
                            path: "/login"
                        })
                    },
                    onCancel() {
                        console.log('Cancel');
                    },
                    class: 'test',
                });
                return
            }
            this.form1.email = this.$store.getters.getterUserInfo.email
        },
        handleGetMailCode() {
            console.log(111)
            const pattern = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
            if (!this.form1.email) {
                this.$message.error(this.$t('index.placeholder[3]'));
            } else if (!pattern.test(this.form1.email)) {
                this.$message.error(this.$t('index.placeholder[3]'));
            } else {
                this.sendEmailCodeReg()
            }
        },
        getProvincePage(){
          getProvincePageApi({}).then((data) => {
            this.provinceList=data.data.records
            }).catch((err) => {
                console.log(err, 'err')
                err.msg ? this.$message.error(err.msg) : '';
                //this.verifycodeLoding = false;
            })
        },
        sendEmailCodeReg() {
            this.verifycodeLoding = true;
            this.intervalins = setInterval(() => {
                this.count = this.count - 1
                if (this.count == 0) {
                    this.verifycodeLoding = false;
                    this.count = 60;
                    clearInterval(this.intervalins)
                    this.intervalins = null
                }
            }, 1000)
            sendEmailCodeRegApi(this.form1).then((data) => {
                this.$message.info(data.message || '验证码发送成功!');
            }).catch((err) => {
                console.log(err, 'err')
                err.msg ? this.$message.error(err.msg) : '';
                //this.verifycodeLoding = false;
            })
        },
        removefile1(type) {
            this.form3[type] = ''
        },
        handlesuccessfile1(type,file) {
            this.form3[type] = file
        }
    },
};
</script>

<style lang="less" scoped>
.wrapper {
    min-height: 1050px;
    padding-bottom: 20px;
    background-color: rgb(247, 247, 247);
    font-family: -apple-system, BlinkMacSystemFont, "Microsoft YaHei", "Arial";
    text-align: left;
    padding-top: 20px;
}

.container {
    background-color: #fff;
    margin: 0 auto;
    width: 1260px !important;
}

.texycontainer {
    padding: 18px 30px;
    border-radius: 8px;

    P {
        margin-bottom: 10px;
    }
}

#components-form1 {
    width: 50%;
}

#components-form2 {
    width: 80%;
}

#components-form3 {
    width: 80%;
}

.container:before {
    content: '';
    display: table;
}

.steps-action {
    text-align: center;
}

.stepswaper {
    padding: 28px;
}

.dot {
    text-indent: 16px;
    margin-bottom: 8px;
    color: #000;
}

.tag {
    border: 1px solid #007CBB;
    padding: 4px 9px;
    color: #007CBB;
    font-size: 14px;
    text-align: center;
    margin-right: 14px;
    border-radius: 4px;
    cursor: pointer;
}

.tagactive {
    background-color: #007CBB;
    color: #fff;
}

.steps-content {
    margin-top: 16px;
    border: 1px dashed #e9e9e9;
    border-radius: 6px;
    background-color: #fafafa;
    min-height: 200px;
    text-align: center;
    padding-top: 80px;
    input{
      text-align: left;
    }
}

.conttexwaper {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 4px;
}

.componentsteps {
    display: flex;
    justify-content: center;
    align-items: center;

    /deep/.ant-input-group-addon {
        padding: 0px;
    }

    .verifyButton {
        height: 30px;
        border-radius: 0px;
        min-width: 116px;
    }

    .time {
        color: #999;
    }

    .time2 {
        color: #fa8c16;
    }
}

.steps-action {
    margin-top: 24px;
}
</style>
